<template>
  <div>
    <div class="margin-container-list">
      <!--顶部搜索 -->
      <div class="top-operate">
        <div class="inline-flex">
          <el-select v-model="textCol" style="width: 120px">
            <el-option label="商品货号" value="goodsCode"></el-option>
            <el-option label="商品条码" value="goodsBarCode"></el-option>
            <el-option label="商品名称" value="title"></el-option>
          </el-select>
          <el-input @keyup.enter.native="doSearch" v-model.trim="textValue" class="width-200" placeholder="请输入内容"></el-input>
        </div>
        <el-cascader v-model="categoryIds" :props="{ checkStrictly: true }" :options="categoryData" filterable clearable placeholder="选择商品零售分类" class="pad-l-10" style="width: 250px"></el-cascader>
        <el-select v-model="defaultQuery.goodsType" placeholder="选择商品类型" clearable class="pad-l-10" style="width: 150px">
          <el-option label="零售商品" value="30"></el-option>
          <el-option label="批发商品" value="31"></el-option>
          <el-option label="零售+批发商品" value="32"></el-option>
        </el-select>
        <el-button-group class="mar-l-20">
          <el-button type="primary" @click="doSearch">查询</el-button>
          <el-button plain @click="doResetSearch">重置</el-button>
        </el-button-group>
      </div>

      <!-- 内容列表 -->
      <div class="table-container scroll-layer-box">
        <el-table :data="dataList" v-loading="listLoading" element-loading-text="加载中">
          <el-table-column min-width="320px" label="商品名称" prop="title">
            <template slot-scope="scope">
              <div class="v-align-c cursor-p">
                <label><img :src="scope.row.mainImage" class="t-goods-pic"></label>
                <div class="pad-l-10">
                  <div class="line-2 width-200">
                    <span class="font-blue" :title="scope.row.title">{{ scope.row.title }}</span>
                  </div>
                  <div>
                    <span class="font-color-6 font-13" v-if="scope.row.categoryName">[{{ scope.row.categoryName }}]</span>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="250px" label="商品编码">
            <template slot-scope="scope">
              <span>货号：{{ scope.row.goodsCode }}</span>
              <br/>
              <span>条码：{{ scope.row.goodsBarCode }}</span>
            </template>
          </el-table-column>
          <el-table-column width="180px" label="规格描述" prop="skuDetail" align="center">
          </el-table-column>
          <el-table-column width="120px" label="库存" align="center">
            <template slot-scope="scope">
              <div>{{ scope.row.stock }}</div>
              <div class="font-green">可用：{{ scope.row.remainStock }}</div>
              <div>占用：{{ scope.row.stockInUse }}</div>
              <div>冻结：{{ scope.row.stockFrozen }}</div>
            </template>
          </el-table-column>
          <el-table-column width="120px" label="商品类型" prop="goodsType">
            <template slot-scope="scope">
              {{ dict.goodsType[scope.row.goodsType] }}
            </template>
          </el-table-column>
          <el-table-column width="80px" label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="medium" @click="doAddGoods(scope.row)">添加</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <div class="pagination">
        <el-pagination background 
          @size-change="handleSizeChange" 
          @current-change="handleCurrentChange"
          :current-page="searchListQuery.currentPage"
          :page-sizes="[10, 20, 50, 100]" 
          :page-size="searchListQuery.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
    <div class="dialog-footer mar-b-20">
      <el-button @click="doCancel">关闭</el-button>
    </div>
  </div>
</template>

<script>
  import { listGoodsCategory } from '@/api/goods/goods'
  import { getDictByGroupName } from '@/api/common/common'
  import { pagingWarehouseGoodsSku } from '@/api/warehouse/warehouseGoods'
  import { pagingPurchaseOrderGoods } from '@/api/warehouse/purchaseOrderGoods'

  export default {
    props: {
      showFlag: {
        type: Boolean,
        default() {
          return false
        }
      },
      // 仓库id
      warehouseId: {
        type: String
      },
      // 供应商id
      supplierId: {
        type: String
      },
      // 采购单类型
      purchaseOrderType: {
        type: Number
      },
      // 采购单Id
      relationPurchaseOrderNo: {
        type: String
      },
      // 业务属性
      businessType: {
        type: Number
      },
      // 采购单单号
      purchaseOrderNo: {
        type: String
      },
      // 仓库商品id集合
      warehouseGoodsIds: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {
        // 文本model
        textCol: 'goodsCode',
        textValue: '',
        // 分类model
        categoryIds: [],
        // 默认条件
        defaultQuery: {
          currentPage: 1,
          size: 10,
          goodsType: ''
        },
        // 查询条件
        searchListQuery: {},
        // 数据字典
        dict: {
          goodsType: {}
        },
        // 商品分类集合
        categoryData: [],
        // 勾选集合
        multipleSelection: [],
        total: 0,
        listLoading: false,
        dataList: [],
        // 入库 1：采购入库 2：销售退货 3：调拨入库 4：盘盈入库 5：其他入库 11:调整入库
        businessTypeInList: [1, 2, 3, 4, 5, 11],
        // 出库 6：采购退货 7：销售出库 8：调拨出库 9：盘亏出库 10：其他出库 12：调整出库
        businessTypeOutList: [6, 7, 8, 9, 10, 12]
      }
    },
    watch: {
      showFlag(val) {
        if (val) {
          this.doResetSearch()
        }
      }
    },
    // 初始化页面
    created() {
      this.searchListQuery = { ... this.defaultQuery }
      // 获取商品零售类目
      listGoodsCategory(this.getEnterpriseId()).then(response => {
        this.categoryData = response.data
      })
      // 初始化数据字典
      getDictByGroupName('ProjectGoodsDTO').then(response => {
        this.dict = response.data
      })
      this.initList()
    },
    methods: {
      // 获取商品列表
      initList() {
        this.listLoading = true
        const size = this.searchListQuery.size
        const currentPage = this.searchListQuery.currentPage
        this.searchListQuery = { ... this.defaultQuery }
        this.searchListQuery.size = size
        this.searchListQuery.currentPage = currentPage
        this.searchListQuery.authorizeStatus = 1
        this.searchListQuery.enterpriseId = this.getEnterpriseId()
        this.searchListQuery.warehouseId = this.getWarehouseId()
        this.searchListQuery.stockZeroFlag = this.businessTypeOutList.includes(this.businessType) ? 0 : 1
        this.searchListQuery[this.textCol] = this.textValue
        this.searchListQuery.oneCategoryId = this.categoryIds.length > 0 ? this.categoryIds[0] : ''
        this.searchListQuery.twoCategoryId = this.categoryIds.length > 1 ? this.categoryIds[1] : ''
        this.searchListQuery.threeCategoryId = this.categoryIds.length > 2 ? this.categoryIds[2] : ''
        this.searchListQuery.supplierId = this.supplierId
        this.searchListQuery.purchaseOrderType = this.purchaseOrderType
        this.searchListQuery.relationPurchaseOrderNo = this.relationPurchaseOrderNo
        this.searchListQuery.warehouseGoodsIds = this.warehouseGoodsIds.join(',')
        if (this.purchaseOrderNo) {
          this.searchListQuery.purchaseOrderNo = this.purchaseOrderNo
          pagingPurchaseOrderGoods(this.searchListQuery).then(response => {
            this.total = response.data.total
            this.dataList = response.data.records
            this.listLoading = false
          })
        } else {
          pagingWarehouseGoodsSku(this.searchListQuery).then(response => {
            this.total = response.data.total
            this.dataList = response.data.records
            this.listLoading = false
          })
        }
      },
      // 查询事件
      doSearch() {
        this.searchListQuery.currentPage = 1
        this.initList()
      },
      // 重置事件
      doResetSearch() {
        const originData = this.$options.data()
        this.textCol = originData.textCol
        this.textValue = originData.textValue
        this.categoryIds = originData.categoryIds
        this.defaultQuery = originData.defaultQuery
        this.doSearch()
      },
      // 添加商品事件
      doAddGoods(row) {
        this.$emit('addGoods', row)
      },
      // 取消事件
      doCancel() {
        this.$emit('closeDialog')
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.initList()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.initList()
      }
    }
  }
</script>

<style lang="less" scoped>

</style>